<script lang="ts" setup>
import { ref, reactive, toRaw, onMounted, onBeforeMount, defineProps, onBeforeUnmount } from "vue";
import apiService from "@/services/apiService";
import { conversionUtcDate, base64ToExcelAndDownload } from "@/utils/auth";
import { v4 as uuidv4 } from "uuid";
import { ElMessageBox, ElMessage } from "element-plus";
import { message } from "@/utils/message";
import AMapLoader from "@amap/amap-jsapi-loader";
import {
  GetAllUsersByPaging,
  GetElectronicFence,
  CreateElectronicFence,
  DeleteElectronicFence,
  GetLocationDetailsAsync,
  UpdateUserConfigurationInformation,
  FindTrajectory
} from "@/api/api";
import { getToken } from "@/utils/auth";
import { useRoute } from 'vue-router';

const route = useRoute()
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Dianziweilan"
});

//表格数据
const Data = ref<any>([
  {
    userid: "1",
    name: "病患1"
  }
]);
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页条数
const Total = ref<number>(1); //总条数
const GetList = () => {
  const data = ref({
    token: getToken().accessToken,
    body: {
      pageNumber: currentPage.value,
      pageSize: pageSize.value
    }
  });
  GetAllUsersByPaging(data.value).then((res: any) => {
    console.log(res);
    if (res.code == 200) {
      Data.value = [];
      // res.data.users.forEach(item => {
      //   Data.value.push({
      //     label: item.name,
      //     value: item.id
      //   });
      // });
      Data.value.push(...res.data.users);
      Total.value = res.data.totalRecords;
      console.log("病患表单:", Data.value);
    }
  });
};

//详情数据
const userId = ref<any>([]);
const info = row => {
  positionArr.value = []
  weilan_options.value = []
  dialogVisible.value = true;
  // show.value = false;
  if (type.value == true) {
    userId.value = row
    console.log("用户详情", row);
  } else {
    userId.value = row.id;
    console.log("用户详情", row.id);
  }

  Info.Fencejson = [];
  Info.Address = ''
  Info.bound = [];
  Info.Name = row.name;
  Info.Phonenumber = row.phone;
  ALLmarkers.value = [];
  show.value = false;
  //根据id查询用户电子围栏
  const data = ref({
    token: getToken().accessToken,
    body: {
      id: userId.value
    }
  });
  GetElectronicFence(data.value)
    .then((res: any) => {
      Info.Name = res.data.userName
      Info.Phonenumber = res.data.phone
      // Info.Address=
      if (
        res.data.electronicFences != "没有电子围栏信息"
      ) {
        // res.data.electronicFence.electronicfencedots.forEach((item: any) => {
        //   Info.Fencejson.push({
        //     position: [item.longitude, item.latitude]
        //   });
        //   Info.bound.push([item.longitude, item.latitude]);
        // });

        res.data.electronicFences.forEach((item, xuhao) => {
          const positions = [];
          const bound = []
          item.electronicfencedots.forEach((i) => {
            positions.push([i.longitude, i.latitude]);
            bound.push([i.longitude, i.latitude])
          });
          Info.Fencejson.push({
            xuhao: item.name,
            positions: positions
          });

          weilan_options.value.push({
            value: String(item.id),
            label: item.name
          })
          Info.bound.push({
            xuhao: item.name,
            bound: bound
          })
        });


        show.value = true;
        if (res.data.currentLocation != '没有位置信息') {
          ALLmarkers.value.push({
            position: [
              res.data.currentLocation.longitude,
              res.data.currentLocation.latitude
            ]
          });
          const data = ref({
            token: getToken().accessToken,
            body: {
              longitude: res.data.currentLocation.longitude,
              latitude: res.data.currentLocation.latitude
            }
          })
          GetLocationDetailsAsync(data.value).then((res: any) => {
            // console.log('Address:', res)
            Info.Address = res.data.name
          }).catch(err => {
            console.log(err);

          })
        }

      } else if (res.code == 405) {
        show.value = false;
      } else {
        if (res.data.currentLocation != '没有位置信息') {
          ALLmarkers.value.push({
            position: [
              res.data.currentLocation.longitude,
              res.data.currentLocation.latitude
            ]
          });
          const data = ref({
            token: getToken().accessToken,
            body: {
              longitude: res.data.currentLocation.longitude,
              latitude: res.data.currentLocation.latitude
            }
          })
          GetLocationDetailsAsync(data.value).then((res: any) => {
            // console.log('Address:', res)
            Info.Address = res.data.name
          }).catch(err => {
            console.log(err);

          })
        }
      }
      initMap();
    })
    .catch((err: any) => {
      console.log("接口报错:", err);
    });
};

// 监听页码变化
const handleCurrentChange = val => {
  currentPage.value = val;
  GetList();
};

// 监听每页条数变化
const handleSizeChange = val => {
  pageSize.value = val;
};

const dialogVisible = ref(false);
const dialogVisible_weilan = ref(false)
const handleClose = (done: () => void) => {
  // ElMessageBox.confirm("确认关闭?")
  //   .then(() => {
  positionArr.value = []
  result_bounds.value = []
  type.value = false
  done();

  // })
  // .catch(() => {
  //   // catch error
  // });
};
const handleClose2 = (done: () => void) => {
  type.value = false
  weilan_name.value = ''
  done();
};
const handleClose3 = (done: () => void) => {
  done();
};
const handleClose4 = (done: () => void) => {
  day.value ='',startTime.value='',  endTime.value='', lujing_path.length = 0;
  done();
};


const Info = reactive({
  Name: "",
  Phonenumber: "",
  Address: "",
  Fencejson: [
    // { position: [120.312472, 30.309716], title: "地点A" },
    // { position: [120.316763, 30.301194], title: "地点B" },
    // { position: [120.32569, 30.308826], title: "地点C" }
  ],
  bound: []
});
const show = ref(false);

const map = ref(null);
const ALLmarkers = ref([
  // { position: [116.405285, 39.904989], title: "Marker 1" },
  // { position: [116.448261, 39.921984], title: "Marker 2" }
]);
const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "e344425544e4543eb4008c4904df542f"
  };
  AMapLoader.load({
    key: "fd5b2eba3a5fce51f09d27832c9e7f09", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.Geolocation",
      "AMap.Polygon",
      "AMap.Geocoder",
      "AMap.AutoComplete",
      "AMap.PlaceSearch",
      "AMap.MouseTool",
      "AMap.Walking",
      "AMap.Driving"
    ] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then(AMap => {
      map.value = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923] // 初始化地图中心点位置
      });

      // 创建定位实例
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000, // 超过10秒后停止定位，默认：无穷大
        buttonPosition: "LB", // 定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮的偏移量
        zoomToAccuracy: false // 定位成功后是否自动调整地图视野到定位点
      });

      // 添加定位插件
      map.value.addControl(geolocation);

      console.log('当前点位坐标', ALLmarkers.value);

      if (ALLmarkers.value != []) {
        ALLmarkers.value.forEach(marker => {
          const newMarker = new AMap.Marker({
            position: marker.position,
            title: marker.title,
            map: map.value,
            offset: new AMap.Pixel(0, 0) // 设置偏移量为(0, 0)
            // extData: {
            //   id: marker.id // 假设id从1开始递增
            // }
            // icon: new AMap.Icon({
            //   size: new AMap.Size(30, 30), // 图标尺寸
            //   image: "../../icons/svg/地图标记(在范围).png", // 本地图片路径
            //   imageSize: new AMap.Size(30, 30), // 图标显示大小
            // }),
          });
          newMarker.on("click", function (e) {
            console.log("点击了标记点：", marker.title);
            console.log("经纬度：", e.lnglat.lng, e.lnglat.lat);
            console.log("ID：", newMarker.getExtData().id);
            // 将地图中心点设置为标记点的位置
            // this.map.setCenter([e.lnglat.lng, e.lnglat.lat]);
            // 设置地图缩放级别以便于更好地展示标记点
            // this.map.setZoom(17);
            // this.activeNames = newMarker.getExtData().id;
            // console.log(this.activeNames);
            // 可根据需要输出更多标记点信息
          });
        });
      }


      // 绘制矩形
      // @ts-ignore
      //  Info.bound.push({
      //        xuhao: xuhao,
      //        bound: bound
      //  })

      Info.bound.forEach((item, index) => {

        const polygon = new AMap.Polygon({
          path: item.bound,
          strokeColor: "#2C73F1", // 多边形边框颜色
          strokeWeight: 2, // 多边形边框线宽
          fillColor: "#2C73F1", // 多边形填充颜色
          fillOpacity: 0.3, // 多边形填充透明度
          map: map.value
        });

        // 将地图视角调整到指定范围
        map.value.setFitView([polygon]);

      })
      // const polygon = new AMap.Polygon({
      //   path: Info.bound,
      //   strokeColor: "#2C73F1", // 多边形边框颜色
      //   strokeWeight: 2, // 多边形边框线宽
      //   fillColor: "#2C73F1", // 多边形填充颜色
      //   fillOpacity: 0.3, // 多边形填充透明度
      //   map: map.value
      // });

      // // 将地图视角调整到指定范围
      // map.value.setFitView([polygon]);
    })
    .catch(e => {
      console.log(e);
    });
};

//点击该按钮在地图上用鼠标获取经纬度
const isGetClickLocationEnabled = ref(false);
const toggleGetClickLocation = () => {
  isGetClickLocationEnabled.value = !isGetClickLocationEnabled.value;
  if (isGetClickLocationEnabled.value) {
    map.value.on("click", handleClickMap);
    ElMessage({
      message:
        "已开启鼠标定位，点击鼠标将存入电子围栏坐标，请按顺时针或逆时针顺序获取坐标",
      type: "success"
    });
  } else {
    map.value.off("click", handleClickMap);
    ElMessage({
      message: "已关闭鼠标定位",
      type: "warning"
    });
  }
};
const positionArr = ref([]);
const handleClickMap = e => {
  const lnglat = e.lnglat; // 获取点击位置的经纬度
  console.log("点击位置的经度：" + lnglat.getLng());
  console.log("点击位置的纬度：" + lnglat.getLat());
  // const arr =[]
  // arr.push(lnglat.getLng(),lnglat.getLat())
  positionArr.value.push({
    jingdu: lnglat.getLng(),
    weidu: lnglat.getLat()
  });

  console.log("当前鼠标点击存储的经纬度信息", positionArr.value);
};

//存储鼠标获取经纬度删除按钮
const clearText = () => {
  ElMessageBox.confirm("是否确定清除已存储坐标？")
    .then(() => {
      // 清除地图上已有的覆盖物
      map.value.clearMap();
      positionArr.value = [];
      Info.Fencejson = [];
      result_bounds.value = []
    })
    .catch(() => {
      // catch error
    });
};
//制作电子围栏
//上传时候的电子围栏坐标
const result_bounds = ref([]);
const make_weilan = () => {
  //坐标不足三个
  if (positionArr.value.length <= 2) {
    ElMessage({
      message: "制作电子围栏至少需要三个坐标",
      type: "warning"
    });
  } else {
    //坐标足够,提示用户检查坐标
    const isDuplicate = (arr, item) => {
      return arr.some(existing => existing.longitude === item.longitude && existing.latitude === item.latitude);
    };
    ElMessageBox.confirm("请检查该坐标顺序是否为顺时针或者逆时针")
      .then(() => {
        const bounds = [];
        positionArr.value.forEach(item => {
          bounds.push([item.jingdu, item.weidu]);
          const newItem = { longitude: item.jingdu, latitude: item.weidu };
          if (!isDuplicate(result_bounds.value, newItem)) {
            bounds.push([item.jingdu, item.weidu]);
            result_bounds.value.push(newItem);
          }
        });
        // console.log(bounds);

        // 绘制矩形
        // @ts-ignore
        const polygon = new AMap.Polygon({
          path: bounds,
          strokeColor: "#2C73F1", // 多边形边框颜色
          strokeWeight: 2, // 多边形边框线宽
          fillColor: "#2C73F1", // 多边形填充颜色
          fillOpacity: 0.3, // 多边形填充透明度
          map: map.value
        });

        // 将地图视角调整到指定范围
        map.value.setFitView([polygon]);
        isGetClickLocationEnabled.value = !isGetClickLocationEnabled.value;
        map.value.off("click", handleClickMap);
        console.log("制作围栏");

      })
      .catch(() => {
        // catch error
      });
  }
};
const weilan_name = ref('')
//保存该电子围栏
const baocun = () => {

  //@ts-ignore
  if (result_bounds.value == '') {
    message("请绘制电子围栏", { type: "error" });
  } else {
    dialogVisible_weilan.value = true
  }

};
const baocun_info = () => {
  if (weilan_name.value != '') {
    const data = ref({
      token: getToken().accessToken,
      body: {
        name: weilan_name.value,
        userId: userId.value,
        dots: result_bounds.value
      }
    });
    CreateElectronicFence(data.value).then((res: any) => {
      if (res.code == 200) {
        ElMessage({
          message: "创建电子围栏成功",
          type: "success"
        });
        GetList();
        dialogVisible_weilan.value = false
        dialogVisible.value = false;
      }
    });
  } else {
    message("请明命电子围栏", { type: "error" });
  }
}
//删除电子围栏
const dialogVisible_shanchu = ref(false)
const weilan_value = ref<any>()
const weilan_options = ref<any>([])
const del = () => {
  dialogVisible_shanchu.value = true
};
const del_info = () => {
  // console.log(weilan_value.value);
  ElMessageBox.confirm("是否确定清除选中电子围栏？")
    .then(() => {
      const data = ref({
        token: getToken().accessToken,
        body: {
          id: weilan_value.value
        }
      });
      DeleteElectronicFence(data.value).then((res: any) => {
        if (res.code == 200) {
          ElMessage({
            message: "删除成功",
            type: "success"
          });
          GetList();
          dialogVisible_shanchu.value = false
          dialogVisible.value = false;
        }
      });
    })
    .catch(() => {
      // catch error
    });

}

const dialogVisible_shezhi = ref(false)
const yichang = ref({
  id: "",
  xiaxian: "",
  starttime: "",
  endtime: "",
  userId: "",
  heartRate: "",
  lowerHeartRate: '',
  heartRateStartTime: '',
  heartRateEndTime: '',
  steps: "",
  lowerSteps: "",
  stepsStartTime: "",
  stepsEndTime: ""
})
const shezhi = row => {
  (yichang.value.steps = row.userConfig.steps),
    (yichang.value.stepsStartTime = row.userConfig.stepsStartTime),
    (yichang.value.stepsEndTime = row.userConfig.stepsEndTime),
    (yichang.value.lowerSteps = row.userConfig.lowerSteps),
    (yichang.value.heartRate = row.userConfig.heartRate),
    (yichang.value.lowerHeartRate = row.userConfig.lowerHeartRate),
    (yichang.value.heartRateStartTime = row.userConfig.heartRateStartTime),
    (yichang.value.heartRateEndTime = row.userConfig.heartRateEndTime),
    (yichang.value.userId = row.userId),
    (yichang.value.id = row.userConfig.id);
}
const shezhi_add = () => {
  if (
    yichang.value.xiaxian != ""
  ) {
    const data = ref({
      token: getToken().accessToken,
      body: {
        id: yichang.value.id,
        heartRate: yichang.value.heartRate,
        steps: yichang.value.steps,
        distance: Number(yichang.value.xiaxian),
        lowerHeartRate: yichang.value.lowerHeartRate,
        heartRateEndTime: yichang.value.heartRateEndTime,
        heartRateStartTime: yichang.value.heartRateStartTime,
        lowerSteps: yichang.value.lowerSteps,
        userId: yichang.value.userId,
        stepsStartTime: yichang.value.stepsStartTime,
        stepsEndTime: yichang.value.stepsEndTime
      }
    });
    UpdateUserConfigurationInformation(data.value)
      .then((res: any) => {
        console.log(res);
        if (res.code == 200) {
          message("配置成功", { type: "success" });
          GetList();
          dialogVisible_shezhi.value = false;
        }
      })
      .catch((err: any) => {
        console.log(err);
      });
  } else {
    message("请填写完整心率设置信息", { type: "error" });
  }
}
const userid = ref()
//查看路径
const dialogVisible_lujing = ref(false)
const day = ref('')
const startTime = ref('')
const endTime = ref('')
const lujing_path: any[][] = []
const search = () => {
  console.log('路径日期时间段', day.value + " " + startTime.value, day.value + " " + endTime.value)
  if (day.value == '' || startTime.value == '' || endTime.value == '') {
     message("请填写完整时间段", { type: "error" });
  } else {
    const data = ref({
    token: getToken().accessToken,
    body: {
      startTime: day.value + " " + startTime.value,
      endTime: day.value + " " + endTime.value,
      userId: lujing_id.value,
    }
  });
  FindTrajectory(data.value).then((res: any) => {
    if (res.code == 200) {
      res.data.forEach((item: any) => {
          const arr =[ item.longitude,item.latitude]
        lujing_path.push(arr)
      })
       if ( lujing_path.length === 0) {
          message("该时间段暂无路径", { type: "error" });
       } else {
            initMap_lujing()
        }
       console.log(lujing_path);
    }
  });
  }
}
const lujing_id =ref('')
const lujing = row => {
  console.log(row.id);
  lujing_id.value = row.id
  initMap_lujing()
}
const map_lujing = ref(null);
const initMap_lujing = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "e344425544e4543eb4008c4904df542f"
  };
  AMapLoader.load({
    key: "fd5b2eba3a5fce51f09d27832c9e7f09", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.Geolocation",
      "AMap.Polygon",
      "AMap.Geocoder",
      "AMap.AutoComplete",
      "AMap.PlaceSearch",
      "AMap.MouseTool",
      "AMap.Walking",
      "AMap.Driving"
    ] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then(AMap => {
      map_lujing.value = new AMap.Map("lujing", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923] // 初始化地图中心点位置
      });

      // 创建定位实例
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000, // 超过10秒后停止定位，默认：无穷大
        buttonPosition: "LB", // 定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮的偏移量
        zoomToAccuracy: false // 定位成功后是否自动调整地图视野到定位点
      });

      // 添加定位插件
      map_lujing.value.addControl(geolocation);

      // 定义三个经纬度点
      // const path = [
      //   [116.397428, 39.90923],  // 第一个点
      //   [116.405285, 39.904989], // 第二个点
      //   [116.406876, 39.914885]  // 第三个点
      // ];

      // 创建折线
      const polyline = new AMap.Polyline({
        path: lujing_path, // 设置折线的路径
        borderWeight: 4, // 设置线条宽度
        strokeColor: "#FF0000", // 线条颜色
        strokeOpacity: 1, // 线条透明度
        strokeStyle: "solid" // 线条样式
      });

      // 在地图上绘制折线
      polyline.setMap(map_lujing.value);

      // 自动聚焦到折线上
      map_lujing.value.setFitView(polyline);

    })
    .catch(e => {
      console.log(e);
    });
};


// const beforeunloadHandler =(e)=> {
//    history.state = "";
// };
import { useUserStoreHook } from "@/store/modules/user";
import { number } from "echarts";
const UserStore = useUserStoreHook();
const type = ref(false)
onMounted(() => {
  // window.addEventListener('beforeunload', (e) => beforeunloadHandler(e));
  userid.value = ''
  // if (route.currentRoute.value.query.id == '') {
  GetList();
  // } else {
  //定位页面跳转传参
  // const id = getToken()
  // @ts-ignore
  userid.value = UserStore.now_user
  console.log("接收到的路由参数", userid.value);
  if (userid.value != '') {
    type.value = true
    info(userid.value)
  }
});
onBeforeUnmount(() => {

});

onBeforeMount(() => {
  // GetList();
});
</script>

<template>
  <div>
    <el-row>
      <el-col style="margin-top: 10px">
        <el-table class="box-table" :data="Data" :stripe="true" :border="true" :fit="true">
          <el-table-column prop="name" label="病患姓名" width="auto" align="center" header-align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="auto">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="
                info(scope.row);
              ">查看/编辑电子围栏</el-button>
              <el-button link type="primary" size="small"
                @click="shezhi(scope.row); dialogVisible_shezhi = true">设置距离电子围栏距离</el-button>
              <el-button link type="primary" size="small"
                @click="lujing(scope.row); dialogVisible_lujing = true">查看路径</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col style="margin: 0 auto">
        <el-card>
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="Total">
            </el-pagination>
          </div>
        </el-card>
      </el-col>

      <!-- 电子围栏详情 -->
      <el-dialog v-model="dialogVisible" title="电子围栏详情" width="90%" :before-close="handleClose">
        <el-form :model="Info" label-width="100px">
          <el-row class="SearchRow" style="position: relative;">
            <el-col :span="12">
              <div class="dialog_info" style="position: relative;">
                <div class="dialog_info_box">
                  <span>姓名：</span>
                  <p>{{ Info.Name }}</p>
                </div>
                <div class="dialog_info_box">
                  <span>手机号：</span>
                  <p>{{ Info.Phonenumber }}</p>
                </div>
                <div class="dialog_info_box">
                  <span>最新打卡地点：</span>
                  <p>{{ Info.Address }}</p>
                </div>
                <div class="dialog_info_box" style="max-height: 200px;overflow-y: auto;">
                  <span>当前电子围栏经纬度范围：</span>
                  <!-- <button @click="map_info(Info.dianziweilan)">地图查看电子围栏范围</button> -->
                  <div class="dialog_info_box_right" v-if="show === false">
                    <p style="color: red">当前用户暂无电子围栏</p>
                  </div>
                  <div class="dialog_info_box_right" v-if="show === true">
                    <p style="color: green" v-for="(item, index) in Info.Fencejson" :key="index">
                      围栏名称:{{ item.xuhao }} <br />
                    <p v-for="(i, index) in item.positions" :key="index">{{ i }}</p>
                    </p>
                  </div>
                </div>
                <div>
                  <div class="dialog_info_box">
                    <el-button class="bt_1" @click="toggleGetClickLocation">
                      开启/关闭获取鼠标点击位置的经纬度
                    </el-button>
                  </div>
                  <div class="dialog_info_box">
                    <el-button class="bt_1" @click="clearText()">清空当前存储坐标</el-button>
                    <el-button class="bt_1" @click="make_weilan">生成电子围栏</el-button>
                  </div>

                  <div class="dialog_info_box">
                    <!-- @click="Result" -->
                    <el-button class="bt_1" @click="baocun()">保存该电子围栏</el-button>
                    <el-button class="bt_1" @click="del">
                      删除电子围栏
                    </el-button>
                  </div>
                </div>
                <div>
                  <!-- <div class="dialog_info_box">
                    <el-button class="bt_1"> 修改电子围栏 </el-button>
                  </div> -->

                </div>

                <div class="position_box">
                  <div v-for="(item, index) in positionArr" :key="index">
                    <p style="font-size: 14px">经度:{{ item.jingdu }} </p>
                    <p style="font-size: 14px">纬度:{{ item.weidu }} </p>
                  </div>
                </div>
              </div>
            </el-col>
            <div id="container" style="
                position: absolute;
                top: 0;
                right: 0;
                width: 60%;
                height: 100%;
                z-index: 1;
              "></div>
          </el-row>
        </el-form>
      </el-dialog>

      <!-- 电子围栏命名 -->
      <el-dialog v-model="dialogVisible_weilan" title="电子围栏明命" width="30%" :before-close="handleClose2">
        <el-input v-model="weilan_name" placeholder="请填写电子围栏名" />
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible_weilan = false">取消</el-button>
            <el-button type="primary" @click="baocun_info()">
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 删除弹窗 -->
      <el-dialog v-model="dialogVisible_shanchu" title="删除电子围栏" width="30%" :before-close="handleClose3">
        <el-select v-model="weilan_value" placeholder="请选择电子围栏" size="large">
          <el-option v-for="item in weilan_options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible_shanchu = false">取消</el-button>
            <el-button type="primary" @click="del_info()">
              删除
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 设置异常 -->
      <el-dialog v-model="dialogVisible_shezhi" title="距离电子围栏距离设置" width="50%" :before-close="handleClose2">

        <el-col>
          距离电子围栏距离: <el-input v-model="yichang.xiaxian" placeholder="请输入距离" type="number"
            style="width: 200px;"></el-input>
        </el-col>

        <!-- <el-col style="margin-top: 20px;">
          开始时间: <el-time-picker v-model="yichang.starttime" :format="'HH:mm'" value-format="HH:mm" arrow-control placeholder="请选择开始时间" style="width: 200px;" />
          结束时间: <el-time-picker v-model="yichang.endtime" :format="'HH:mm'" value-format="HH:mm" arrow-control placeholder="请选择结束时间" style="width: 200px;" />
        </el-col> -->

        <el-button type="primary" style="margin-left: 25%;width:20%;margin-top: 20px;"
          @click="shezhi_add()">确认</el-button>
      </el-dialog>

      <!-- 路径地图 -->
      <el-dialog v-model="dialogVisible_lujing" title="往期路径" width="90%" :before-close="handleClose4">
        <el-form :model="Info" label-width="100px">
          <div style="position: relative;z-index: 2;padding-left: 20px;">
      
           <el-date-picker v-model="day" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" />
          <el-time-select v-model="startTime" style="width: 150px;margin-left: 20px;" :max-time="endTime" class="mr-4" placeholder="开始时间"
            start="00:00" step="00:15" end="23:55" />
          <el-time-select v-model="endTime" style="width: 150px;margin-left: 20px;" :min-time="startTime" placeholder="结束时间" start="00:00"
            step="00:15" end="23:55" />
          <el-button @click="search" style="margin-left: 20px;">查询</el-button>

         
          </div>
          
          <el-row class="SearchRow" style="position: relative;">

            <div id="lujing" style="
                position: absolute;
                top: -7%;
                right: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
              "></div>
          </el-row>
        </el-form>
      </el-dialog>
    </el-row>


  </div>
</template>
<style lang="scss" scoped>
.SearchRow {
  margin: 0;
  height: 70vh;
}

.dialog_info {
  width: 100%;
  position: relative;

  .dialog_info_box {
    width: 350px;
    margin: 20px 20px 20px 0px;

    span {
      display: inline-block;
    }

    p {
      display: inline-block;
    }

    .dialog_info_box_right {
      float: right;
    }
  }

  #container {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    z-index: 1;
  }

  .position_box {
    position: absolute;
    top: 48%;
    left: 55%;
    width: 150px;
    transform: translate(-50%, -50%);
    background-color: white;
    /* 背景颜色 */
    border-radius: 8px;
    /* 圆角边框 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* 阴影效果 */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    /* 过渡效果 */
    text-align: center;
  }

  .position_box:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    /* 鼠标悬停时的阴影效果 */
    transform: translate(-50%, -50%) translateY(-5px);
    /* 鼠标悬停时稍微上移 */
  }
}
</style>
